<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Start with pixi.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js"></script>
<script type="text/javascript">
//别名（Aliases）
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    Graphics = PIXI.Graphics

//基础代码
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);


function setup() {
    // 画矩形
    var rectangle = new Graphics();

    // lineStyle(width, color , alpha透明度)
    rectangle.lineStyle(4, 0xFF3300, 1);

    rectangle.beginFill(0x66CCFF);

    // drawRect(x, y, width, height)
    rectangle.drawRect(0, 0, 64, 64);

    rectangle.endFill();

    // 位置（基于矩形左上角）
    rectangle.x = 170;
    rectangle.y = 170;
    stage.addChild(rectangle);

    // 画圆
    var circle = new Graphics();
    circle.beginFill(0x9966FF);

    // drawCircle(x, y, radius半径)
    circle.drawCircle(0, 0, 32);
    circle.endFill();

    // 位置（基于圆的中心）
    circle.x = 64;
    circle.y = 130;
    stage.addChild(circle);

    // 画椭圆
    var ellipse = new Graphics();
    ellipse.beginFill(0xFFFF00);

    // drawEllipse(x, y, width, height);
    ellipse.drawEllipse(0, 0, 60, 20);
    ellipse.endFill();

    // 位置（基于中心点）
    ellipse.x = 180;
    ellipse.y = 130;
    stage.addChild(ellipse);

    // 画圆角矩形
    var roundBox = new Graphics();
    roundBox.lineStyle(4, 0x99CCFF, 1);
    roundBox.beginFill(0xFF9933);

    // drawRoundedRect(x, y, width, height, cornerRadius)
    roundBox.drawRoundedRect(0, 0, 84, 36, 10)
    roundBox.endFill();

    // 位置（基于矩形左上角）
    roundBox.x = 48;
    roundBox.y = 190;
    stage.addChild(roundBox);

    // 画直线
    var line = new Graphics();
    line.lineStyle(4, 0xFFFFFF, 1);

    // 开始
    line.moveTo(0, 0);
    // 结束
    line.lineTo(80, 50);

    // 位置
    line.x = 32;
    line.y = 32;
    stage.addChild(line);

    // 画三角形
    var triangle = new Graphics();
    triangle.beginFill(0x66FF33);

    triangle.drawPolygon([
        -32, 64,             //最初的坐标点
        32, 64,              //第二个坐标点
        0, 0                 //第三个坐标点
        
    ]);

    triangle.endFill();

    // 位置（基于最初的坐标点）
    triangle.x = 180;
    triangle.y = 22;

    stage.addChild(triangle);

    renderer.render(stage);
}
setup();
</script>
</body>
</html>